<!--
 * @Author: ltl
 * @Date: 2023-8-29 11:20:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-08 14:48:46
 * @Description: 个人中心页面-家辅-家长学生共用
-->
<template>
  <div class="user-info">
    <div class="use-info-item">
      <img alt="" :src="`/gw/ucsapi/head_photo/user/${userInfo.studentNumber}/${size}`" class="avatar-img" @click="goInfo"/>
      <div class="student-info" :style="{ color: type === 1 ? '#000' : '#fff' }">
        <div class="name">
          <span class="realName">{{ getDecode(userInfo.realName) }}</span>
          <span v-if="parentState && !type"> 的家长</span>
          <span class="switch" v-if="parentState && type" @click="goSwitch">切换</span>
        </div>
        <div :style="{ color: type === 1 ? '#707070' : '#fff' }">
          <p class="school" v-if="!parentState || type">{{ userInfo.schoolName }}</p>
          <p class="class-name" v-if="!parentState || type">{{ userInfo.gradeName + (userInfo.className || '') }}</p>
        </div>
        <p v-if="parentState && !type">{{ userInfo.phone }}</p>
      </div>
    </div>
    <div class="sign-in" :class="!type ? 'types' : 'types2'" v-if="!parentState || type">
      <button v-show="!isSingnStutas" @click="changeSignStatus">签到</button>
      <button v-show="isSingnStutas">已签到</button>
    </div>
    <yj-mob-popup v-model="switchState" position="bottom" class="switchPopup">
      <div class="child">切换孩子</div>
      <div class="prompt">提示：添加学生请重新注册绑定学生</div>
      <div class="childList" @click="goSwitchStudent(item)" v-for="item in childList" :key="item.bizUsername">
        <div class="childList_left">
          <img :src="`/gw/ucsapi/head_photo/user/${item.bizUsername}/${size}`" alt="">
          <span>{{ getDecode(item.bizRole) }}</span>
        </div>
        <div class="childList_right">
          <yj-mob-icon v-if="item.bizUsername === userInfo.studentNumber" name="success" />
        </div>
      </div>
    </yj-mob-popup>
  </div>
</template>

<script>
import { Popup, icon } from 'yj-mob-ui';
import aes from '@/utils/aes';
import { userServices, externalLinkServices } from '@/api';
export default {
  name: 'headParent',
  components: {
    [Popup.name]: Popup,
    [icon.name]: icon
  },
  data () {
    return {
      isSingnStutas: 0,
      size: 100,
      switchState: false,
      childList: []
    };
  },
  props: {
    userInfo: {
      type: Object
    },
    isSingn: {
      type: Number
    },
    type: {
      type: Number // 学生信息使用
    }
  },
  computed: {
    parentState () {
      return this.userInfo.usertype === '0';
    }
  },
  watch: {
    isSingn: function (val) {
      this.isSingnStutas = val;
    }
  },
  created () {
    this.isSingnStutas = this.isSingn;
  },
  methods: {
    goInfo () {
      window.location.href = externalLinkServices.userInfolLink;
    },
    getDecode (name) {
      if (name) {
        return aes.decode(name) || '';
      } else {
        return '';
      }
    },
    // 切换弹层
    goSwitch () {
      this.getChildList();
      this.switchState = true;
    },
    async goSwitchStudent (item) {
      const authToken = JSON.parse(decodeURIComponent(localStorage.getItem('auth_token')));
      var query = {
        userNameChanged: aes.encode(item.username),
        acceccTokenCurrent: authToken.access_token
      };
      const res = await userServices.switchAccountNumber(query);
      if (res.access_token) {
        localStorage.setItem('auth_token', encodeURIComponent(JSON.stringify(res)));
        const loginTime = new Date().getTime();
        localStorage.setItem('auth_time', loginTime);
        localStorage.removeItem('userInitInfo');
        sessionStorage.removeItem('air_class_userinfo');
        this.switchState = false;
        this.$router.go(0);
      }
    },
    // 获取切换孩子列表信息
    async getChildList () {
      const res = await userServices.getChildList();
      if (res.code === '200') {
        this.childList = res.data;
      }
    },
    changeSignStatus () {
      this.$emit('changeSignStatus');
    }
  }
};
</script>
<style lang="scss" scoped>
.user-info {
  width: 350px;
  box-sizing: border-box;
  min-height: 98px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}
.use-info-item {
  display: flex;
  align-items: center;
}
.avatar-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
.student-info {
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular, sans-serif;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
  margin-left: 12px;
  .name {
    font-size: 18px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    .realName{
      max-width: 110px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .switch{
      display: block;
      float: right;
      height: 16px;
      line-height: 16px;
      font-size: 13px;
      padding: 0 6px;
      border: 2px solid #05bb5d;
      border-radius: 16px;
      color: #05bb5d;
      font-weight: 600;
      margin-left: 6px;
    }
  }
}
.sign-in {
  button{
    font-size: 16px;
    font-family: PingFangSC-Regular, sans-serif;
    text-align: center;
    color: #fff;
    border-radius: 16px;
    padding: 6px 18px;
  }
}
.types {
  button{
    background: rgba(41,192,123,0.13);
    border: 2px solid #fff;
  }
}
.types2 {
  margin-right: 12px;
  button{
    border:0;
    background: #05bb5d;
  }
}
.switchPopup{
  min-height: 20%;
  padding-bottom: 26px;
  border-radius: 16px 16px 0 0;
  .child{
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: 600px;
  }
  .prompt{
    font-size: 13px;
    height: 24px;
    line-height: 24px;
    background-color: #ececec;
    color: #787878;
    padding: 0 8px;
  }
  .childList{
    height: 70px;
    line-height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    .childList_left{
      width: 100%;
      display: flex;
      align-items: center;
      img{
        width: 52px;
        height: 52px;
        border-radius: 25px;
      }
      span{
        margin-left: 10px;
        font-size: 17px;
      }
    }
    .childList_right{
      font-size: 26px;
      color: #3183fe;
    }
  }
}
</style>
